<template>
    <view class="content">
		<view class="toper">
			<image src="../../static/page/top2.png" mode="widthFix" class="clase-top"></image>
			
			<view class="prompt" :style="height">
				<image src="../../static/page/love.png" mode="widthFix" class="pt-img"></image>
				<view class="pt-text">{{prompt}}</view>
			</view>
		
			<view class="center">
				<view class="cen-img" @click="status(1)">
					<image src="../../static/image/assignment.png" mode="widthFix" :class="[type == 1 ? ' active' : '']"></image>
				</view>
				<view class="cen-img" @click="status(2)">
					<image src="../../static/image/active.png" mode="widthFix" :class="[type == 2 ? ' active' : '']"></image>
				</view>
				<view class="cen-img" @click="status(3)">
					<image src="../../static/image/passive.png" mode="widthFix" :class="[type == 3 ? ' active' : '']"></image>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<view class="record">
				<view class="msg-list">
					<view  v-for="(li, index) in reserlist" :key="index">
					
						<view :class="'card' + [type == 1 ? [li.status == 1 ? ' color2' : ' color1'] : ' color0']">
							<view class="card-left" v-if="type == 1">
								<image src="../../static/page/love1.png" mode="widthFix" ></image>
								<view class="num">
									{{li.oid}}
								</view>
								
							</view>
							
							<view class="card-center" v-if="type == 1">
								<block v-if="li.status == 0">等待主动分配</block>
								<block v-else>等待被动分配</block>
							</view>
							
							<view class="card-right" v-if="type == 1">
								<uni-countdown :timer="li.time" type='1'></uni-countdown>
							</view>
							
							<view class="card-left1" v-if="type != 1">
								<image :src="li.pay_info.avatar" mode="" class="card-img"></image>
								<view class="card-name">{{li.pay_info.nickname}}</view>
							</view>
							
							<view class="card-center2" v-if="type != 1" @click="looker(li.orderid)">查看信息</view>
							
							<view class="card-right1" v-if="type != 1">
								<view class="card-status1" v-if='li.pay_info.status == 0'>{{i18n.close.confirm3}}</view>
								<view class="card-status1" v-if='li.pay_info.status == 1'>{{i18n.close.confirm4}}</view>
								<view class="card-status" v-if='li.pay_info.status == 3'>{{i18n.close.confirm}}</view>
								<view class="card-status" v-if='li.pay_info.status == 5'>{{i18n.close.confirm2}}</view>
								<view class="card-status1" v-if='li.pay_info.status == -1'>{{i18n.close.confirm5}}</view>
							</view>
						</view>
					</view>
					
					<view class="" @tap='loding'>
						<uni-load-more :loadingType="loadingType" :contentText="contentText" color="#F76671"></uni-load-more>
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup :show="showPopup" type="middle" v-on:hidePopup="hidePopup">
			<view class='popup'>
				<view class="pop-title1">{{poptitle}}</view>
				<view class="pop-content">
					<div v-html="popcontent"></div>
				</view>
				
				<view class="shut" @tap="shut">
					
				</view>
			</view>
		</uni-popup>
		
		<image src="../../static/page/page.png" mode="" class="back_img"></image>
    </view>
</template>

<script>
	import service from '../../service.js';
	import uniPopup from "@/components/uni-popup.vue";
	import pageHead from '../../components/page-head.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import uniCountdown from "@/components/uni-countdown.vue";

	export default {
		computed: {
			i18n () {
				return this.$t('index');
			}
		},
		components: {
			uniCountdown,
			uniLoadMore,
			pageHead,
			uniPopup
        },
		data() {
			return {
				loadingType: 0,
				contentText: uni.getStorageSync('content'),
				token: uni.getStorageSync('token'),
				lang: uni.getStorageSync('lang'),
				type: uni.getStorageSync('type'),
				isHistoryLoading:false,
				scrollAnimation:false,
				showPopup: false,
				poptitle: '',
				popcontent: '',
				reserlist: [],
				title: '',
				prompt: '',
				height: '',
				order: 1,
				pages:1,
				page:0,
				psize:4,
				url:'',
			};
		},
		onShow:function(){
			this.contentText.contentdown = this.i18n.tabbar.cilck;
			this.status(uni.getStorageSync('type'));
		},
		methods:{
			loding(){
				if(this.loadingType == 0){
					this.loadHistory();
				}
			},
			status(id){
				self = this;
				self.order = 1;
				self.pages = 1;
				self.page = 0;
				self.reserlist = [];
				self.isHistoryLoading = false;
				self.scrollAnimation = false;
				if(id == 1){
					self.url = service.api.main.reserlist;
					self.title = self.i18n.main.assignment;
					self.prompt = self.i18n.main.assignment1;
				}else if(id == 2){
					self.url = service.api.main.initiativelist;
					self.title = self.i18n.main.active;
					self.prompt = self.i18n.main.active1;
				}else{
					self.url = service.api.main.passivelist;
					self.title = self.i18n.main.passive;
					self.prompt = self.i18n.main.passive1;
				}
				uni.setNavigationBarTitle({
					title: self.title
				});
				if(self.lang == 'chn'){
					var num = Math.ceil(self.prompt.length / 19) * 20;
				}else{
					var num = Math.ceil(self.prompt.length / 40) * 20;
				}
				self.height = 'height:'+num+'px;';
				self.type = id;
				uni.setStorageSync('type',id);
				self.loadHistory();
			},
			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e){
				if(this.isHistoryLoading){
					return ;
				}
				if(this.page < this.pages){
					this.loadingType = 1;
					var keywords = this.keywords;
					this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求
					this.scrollAnimation = false;//关闭滑动动画
					//本地模拟请求历史记录效果
					var page = this.page+1;
					var psize = this.psize;
					service.auth(this, this.url, {
						page: page,
						psize: psize,
					}, function(self, res) {
						if(res.info > 0){
							var list = res.data;
							var myDate = new Date();
							for(let i=0;i<list.length;i++){
								if(self.type == 1){
									var time = list[i].wait * 1000;
									list[i].time = time;
									list[i].oid = self.order;
									self.order++;
								}
								//将数据逐条写入数组
								self.reserlist.push(list[i]);
							}
							self.scrollAnimation = true;//恢复滚动动画
							self.isHistoryLoading = false;
							var pages = Math.ceil(res.info / psize);
							if(pages == 0){
								self.loadingType = 3;
							}else if(pages == 1 || pages == page){
								self.loadingType = 2;
							}else{
								self.loadingType = 0;
							}
							self.pages = pages;
							self.page = page;
						}else{
							self.loadingType = 2;
						}
					});
				}else{
					this.loadingType = 2;
				}
			},
			looker(id){
				uni.setStorageSync('orderid',id);
				if(this.type == 2){
					var url = '/pages/close/active';
				}else{
					var url = '/pages/close/passive';
				}
				uni.navigateTo({
					url: url,
				});
			}
		}
    }
</script>

<style>
	.content{
		padding: 0;
		background: #F2F2F2;
	}
	.toper{
		z-index: 30;
		width: 100%;
		position: fixed;
	}
	.clase-top{
		z-index: 40;
		position: relative;
		width: 100%;
		height: 320upx;
		/* #ifndef H5 */
		height: 350upx;
		/* #endif */
		
	}
	.prompt{
		z-index: 50;
		position: relative;
		width: 86%;
		margin: 0 7%;
		padding: 20upx 0;
		margin-top: -200upx;
		line-height: 40upx;
		border-radius: 40upx;
		background: rgba(255,255,255,.3);
	}
	.top{
		z-index: 30;
		width: 100%;
		height: 90upx;
		color: #FFFFFF;
		position: fixed;
		font-size: 32upx;
		font-weight: bold;
		text-align: center;
		line-height: 90upx;
		/* #ifndef H5 */
		padding-top: 30upx;
		/* #endif */
		background: linear-gradient(left, #e940a1, #8b39f8);
	}
	.center{
		z-index: 50;
		width: calc(100% - 60upx);
		margin: 20upx 30upx 0;
		height: 240upx;
		display: flex;
	    flex-wrap: wrap;
		position: absolute;
		flex-direction: row;
		display: inline-flex;
	}
	.cen-img{
		width: 30%;
		height: 240upx;
		margin-left: 2.5%;
	}
	.cen-img image{
		width: 100%;
		height: 220upx;
	}
	.active{
		margin-top: 20upx;
	}
	.msg-list{
		margin: 0;
		padding-top: 50upx;
		height: calc(100% - 90upx);
	}
	.back_img{
		margin: 0;
	}
	.bottom{
		z-index: 40;
		margin: 0 40upx;
		margin-top: 500upx;
		/* #ifndef H5 */
		margin-top: 100upx;
		/* #endif */
		width: calc(100% - 80upx);
	}
	.msg-list{
		padding: 0;
		height: 100%;
	}
	
	.record {
		position: absolute;
		display: flex;
	    flex-wrap: wrap;
		flex-direction: row;
		display: inline-flex;
		width: calc(100% - 80upx);
		height: calc(100% - 500upx);
	}
	.pt-img{
		float: left;
		width: 80upx;
		height: 80upx;
		margin: -20upx;
	}
	.pt-text{
		color: #FFFFFF;
		font-size: 28upx;
		padding-left: 80upx;
		padding-right: 10upx;
	}
	.card{
		width: 90%;
		height: 100upx;
		color: #F76671;
		font-size: 28upx;
		padding: 10upx 0;
		text-align: center;
		margin: 20upx 5% 0;
		line-height: 100upx;
		border-radius: 20upx;
		display: flex;
	    flex-wrap: wrap;
		flex-direction: row;
		display: inline-flex;
	}
	.color0{
		background: #FFFFFF;
	}
	.color1{
		background: #FFFFFF;
	}
	.color2{
		background: #FFFFFF;
	}
	.color3{
		background: #FFFFFF;
	}
	.card-top{
		width: 100%;
		height: 30upx;
		line-height: 30upx;
		
	}
	.card-left{
		width: 30%;
		height: 100upx;
	}
	.card-left image,.num{
		width: 80upx;
		height: 80upx;
		margin: 10upx calc(50% - 40upx);
	}
	.num{
		z-index: 100;
		color: #FFFFFF;
		font-size: 40upx;
		position: relative;
		margin-top: -140upx;
	}
	.card-left1{
		width: 35%;
		height: 100upx;
		line-height: 100upx;
	}
	.card-name{
		height: 100upx;
		overflow: hidden;
		line-height: 100upx;
		white-space: nowrap;
		text-overflow: ellipsis;

	}
	.card-center{
		width: 40%;
		height: 100upx;
	}
	.card-center2{
		height: 100upx;
		line-height: 100upx;
		width: caLC(65% - 170upx);
		
	}
	.card-img{
		float: left;
		width: 60upx;
		height: 60upx;
		margin-left: 4upx;
		margin: 18upx 10upx;
		border-radius: 40upx;
		border: 2upx solid #FFFFFF;
	}
	.card-right{
		width: 30%;
		height: 100upx;
	}
	.card-right1{
		width: 160upx;
		height: 100upx;
	}
	.card-button,.card-button1{
		width: 140upx;
		height: 140upx;
		color: #FFFFFF;
		line-height: 200upx;
		margin: -20upx 10upx;
		border-radius: 100upx;
		transform:rotateX(54deg);
		box-shadow: 0 0 20upx #FFFFFF;
		background: rgba(100, 210, 241, 1);
	}
	.card-button1{
		color: #CCCCCC;
		background: rgba(153,153,153,.5);
	}
	.card-status,.card-status1{
		height: 60upx;
		color: #FFFFFF;
		font-size: 30upx;
		line-height: 60upx;
		margin: 20upx 10upx;
		background: #6FA9FC;
		border-radius: 30upx;
		width: calc(100% - 20upx);
	}
	.card-status1{
		background: #999999;
	}
	.btn-img{
		width: 100%;
		height: 100%;
		border-radius: 20upx;
	}
</style>
